<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .header,
        .footer {
            width: 1200px;
            margin: 0 auto;
            background-color: skyblue;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
            height: 120px;
            color: #fff;
        }

        .footer {
            height: 300px;
        }

        ul,
        li {
            list-style: none;
        }

        ul {
            width: 1200px;
            display: flex;
            flex-wrap: wrap;
            margin: 0 auto;
            justify-content: space-between;
            padding-top: 10px;
        }

        li {
            width: 290px;
            border: 1px solid #333;
            margin-bottom: 10px;
            padding: 5px;
            box-sizing: border-box;
        }

        li>a>img {
            width: 278px;
            height: 274px;
            display: block;
        }

        .pagination {
            width: 1200px;
            margin: 10px auto;
            height: 50px;
            display: flex;
            align-items: center;
        }

        .pagination>.prev,
        .pagination>.next {
            width: 50px;
            height: 30px;
            cursor: pointer;
            background-color: orange;
            font-size: 24px;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .pagination>.disable {
            cursor: not-allowed;
            background-color: #ccc;
        }

        .pagination>.total {
            font-size: 30px;
            font-weight: 700;
            margin: 0 20px;
        }

        .pagination>select {
            font-size: 22px;
            padding-left: 20px;
            margin-left: 30px;
        }
    </style>
    <script src="./1月31日默写/js/data.js"></script>
</head>

<body>

    <div class="header">网页头部</div>
    <div class="pagination">
        <span class="prev disable">&lt;</span>
        <span class="total">1 / 100</span>
        <span class="next">&gt;</span>
        <select>
            <option value="4">4</option>
            <option value="8">8</option>
            <option value="12">12</option>
            <option value="16">16</option>
        </select>
    </div>
    <ul>
        
    </ul>
    <div class="footer">网页底部</div>
    <script>
        /* json转js格式  
        JSON.parse();
        
        js转json格式 
        JSON.stringify()
        // 每页显示多少条 程序员决定 
        // 总共多少条 可以获取到  
        // 用户先看第几页  用户决定  用户告诉我想看第几页 

        // 用户想看第8页 我们应该从数组中截取第八页的数据 
        // 第八页 应该是从哪个下标 到哪个下标 
        // 找规律 


        // 每页显示4条
        // 第几页  每页的条数     从第几截取到第几 
        // 1       4            0 ~ 3 
        // 2       4            4 ~ 7 
        // 3       4            8 ~ 11 
        // n       4            (第n页-1)*每页的条数 ~ 第几页*每页的条数-1
        // 截取数据的时候 不能影响原数组 
        // splice(1,3)  slice(开始的索引,到结束的索引)
        // slice((第n页-1)*每页的条数,第几页*每页的条数)


                                

        //[{},{},{},{},.....]
        */
        function second_to_minute(s){
            return `${parseInt(s / 60)}分${s % 60}秒`
        }

        function timestamp_to_time(stamp) {
            var date = new Date(stamp);
            var year = date.getFullYear() + "-";
            var month =
                (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";
            var day = (date.getDate() < 10 ?
                "0" + date.getDate() : date.getDate()) + " ";
            var hour = date.getHours() + ":";
            var minute = date.getMinutes() + ":";
            var second = date.getSeconds();
            return year + month + day + hour + minute + second;
        }
        var newdata = JSON.parse(data);
        // console.log(newdata) 对象
        var videos = newdata['data']['vlist']; // 提取想要的数据  
        // data 键对应的是个对象 vlist 是它的一个键  
        // 这个键对应的是一个数组  
        // console.log(videos)
        var content = document.querySelector('ul')
        // 遍历数组  获取每个数组的元素  
        // 每个元素 提取数据后拼接成一个字符串  
        // 所有的字符串 连城一个大字符串     
        // reduce  数组的元素进行累加  参数是一个函数和 一个起始值   
        // 函数的参数 至少两个   prev  item 
        content.innerHTML = videos.reduce(function(prev,item){
            return prev + 
            `<li>
                <a href="${item.vurl}"><img src="${item.vpic}" alt=""></a>
                <p>标题:${item.shortTitle}</p>
                <p>简介:${item.vt}</p>
                <p>时长:${second_to_minute(item.timeLength)}</p>
                <p>上映时间:${timestamp_to_time(item.publishTime)}</p>
            </li>`
        },'');
    </script>

</body>

</html>